<template>
 <div>
   <div class="mt-20 flex align-center">
    <p class="f26">我的订单</p>
    <p class="ml-10 mt-10 fc-gray">谨防钓鱼链接或者诈骗电话</p>
   </div>
   <div class="flex flex-column">
    <div
      class="mt-20 w-98 m-auto border box-sizing"
      v-for="item in orderData"
      :key="item.id">
      <div class="flex align-center justify-between p-10 border-bottom">
        <div class="flex align-center">
          <p class="mr-20">创建订单时间: {{formatDate(item.createTime)}}</p>
          <p>订单号：{{item.orderNo}}</p>
        </div>
        <div>
          总付金额：<span class="f18 fc-blue">{{item.totalPrice/ 100}}元</span>
        </div>
        <Button @click="edit(item.orderNo)" type="primary">订单详情</Button>
      </div>
      <Table :data="item.orderItemVOList" :columns="columnsData"></Table>
     </div>
    <div class=" m-auto mt-20 mb-20">
      <Page :total="total" :page-size="pageSize" :current="pageNum" @on-change="onChange" />
    </div>
   </div>
 </div>
</template>
<script>
import { orderList } from 'api'
import shopping from '@/mixins/shoppingMixins.js'
export default {
  name: '',
  mixins: [shopping],
  data () {
    return {
      pageNum: 1,
      pageSize: 5,
      orderData: [],
      total: 0, // 总条数
      columnsData: [
        {
          title: '序号',
          align:'center',
          type: 'index',
        },
        {
          title: '商品图片',
          key: 'productImg',
          render: (h,params) => {
            return <img src={this.baseURL + params.row.productImg} style="width:100px;" class="flex align-center justify-center" />
          }
        },
        {
          title: '商品名称',
          align: 'center',
          key: 'productName',
        },
        {
          title: '商品价格',
          align: 'center',
          key: 'unitPrice',
          render: (h,params) => {
            return <div>{params.row.unitPrice /100}元</div>
          }
        },
        {
          title: '商品数量',
          align: 'center',
          key: 'quantity'
        }
      ],
    }
  },
  created() {
    this.orderList()
  },
  mounted() {

  },
  methods: {
    // 订单列表
    orderList() {
      orderList(this.pageNum, this.pageSize).then(res => {
        this.total = res.total
        this.orderData = res.list
      })
    },
    // 切换页数
    onChange (num) {
      this.pageNum = num
      this.orderList()
    },
    // 编辑
    edit(orderNo) {
      this.$router.push({
        path: '/order-detail',
        query: {
          orderNo: orderNo
        }
      })
    },
    // 时间date转字符串str
    formatDate(time, fmt = "yyyy-MM-dd") {
      if (!time)
        return ''
      time = new Date(time)
      // console.log(time, 'time');
      const Weeks = ['日','1','2','3','4','5','6']
      const CWeeks = ['日','一','二','三','四','五','六']
      let o = {
        "M+": time.getMonth() + 1, // 月份
        "d+": time.getDate(), // 日
        "h+": time.getHours(), // 小时
        "m+": time.getMinutes(), // 分
        "s+": time.getSeconds(), // 秒
        "q+": Math.floor((time.getMonth() + 3) / 3), // 季度
        "S": time.getMilliseconds(), // 毫秒
        "W+": CWeeks[time.getDay()],
        "w+": Weeks[time.getDay()]
      };
      if (/(y+)/.test(fmt))
        fmt = fmt.replace(RegExp.$1, (time.getFullYear() + "").substr(4 - RegExp.$1.length));
      for (var k in o)
        if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : ((
          "00" + o[k]).substr(("" + o[k]).length)));
      return fmt;
    }
  }
}
</script>
<style lang='css' scoped>
.w-98{
  width: 98%;
}
</style>